<template>
  <div class="menu">
    <a-menu theme="dark" :default-selected-keys="[defaultSelectItemKey]" :defaultOpenKeys="[defaultOpenItemKey]" mode="inline">
      <template v-for="treeItem in treeData">
        <a-sub-menu :key="treeItem.meta.icon" v-if="treeItem.children && treeItem.children.length">
          <span slot="title">
            <a-icon :type="treeItem.meta.icon" />
            <span>{{treeItem.meta.title}}</span>
          </span>
          <a-menu-item v-for="d in treeItem.children" :key="d.meta.icon">
            <router-link :to="{ path: d.path }">
              <a-icon :type="d.meta.icon" />
              <span>{{d.meta.title}}</span>
           </router-link>
          </a-menu-item>
          <!-- <menu-tree :treeData="treeItem.children" class="menu_children"></menu-tree> -->
        </a-sub-menu>
         <a-menu-item :key="treeItem.meta.icon" v-else>
           <router-link :to="{ path: treeItem.path }">
              <a-icon :type="treeItem.meta.icon" />
              <span>{{treeItem.meta.title}}</span>
           </router-link>
          </a-menu-item>
        </template>
      </a-menu>
  </div>
</template>

<script>
export default {
  name: 'MenuTree',
  data () {
    return {
    }
  },
  props: {
    // 树状结构菜单数据源
    treeData: {
      type: Array,
      default: () => []
    },
    // 默认展开的项key值
    defaultSelectItemKey: {
      type: String,
      default: () => 'global'
    },
    // 默认展开的列表key值
    defaultOpenItemKey: {
      type: String,
      default: () => 'laptop'
    }
  },
  created () {

  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.menu{
  .menu_children{
    margin-left: .2rem;
  }
}
</style>
